<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图距离计算工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 20px;
        }

        .description {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 30px;
        }

        .map-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .map {
            flex: 1;
            min-width: 300px;
            height: 400px;
            background-color: #e0e6ed;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
            cursor: crosshair;
            border: 2px solid #bdc3c7;
        }

        .point {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }

        .point-a {
            background-color: #e74c3c;
        }

        .point-b {
            background-color: #3498db;
        }

        .line {
            position: absolute;
            height: 2px;
            background-color: #2ecc71;
            transform-origin: 0 0;
            z-index: 5;
        }

        .controls {
            flex: 1;
            min-width: 300px;
        }

        .input-group {
            margin-bottom: 15px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #34495e;
        }

        .input-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .coordinates {
            display: flex;
            gap: 10px;
        }

        .coordinates input {
            flex: 1;
        }

        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            border-left: 4px solid #2ecc71;
        }

        .result h3 {
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .distance-value {
            font-size: 24px;
            font-weight: bold;
            color: #2ecc71;
        }

        .unit {
            font-size: 16px;
            color: #7f8c8d;
        }

        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #2980b9;
        }

        .btn-calculate {
            background-color: #2ecc71;
            width: 100%;
            margin-top: 10px;
        }

        .btn-calculate:hover {
            background-color: #27ae60;
        }

        .btn-reset {
            background-color: #e74c3c;
            margin-right: 10px;
        }

        .btn-reset:hover {
            background-color: #c0392b;
        }

        .history {
            margin-top: 30px;
        }

        .history h3 {
            margin-bottom: 15px;
            color: #2c3e50;
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }

        .history-list {
            max-height: 200px;
            overflow-y: auto;
        }

        .history-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .history-item:hover {
            background-color: #f8f9fa;
        }

        .history-points {
            flex: 1;
        }

        .history-distance {
            font-weight: bold;
            color: #2ecc71;
        }

        .application-examples {
            margin-top: 30px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }

        .application-examples h3 {
            margin-bottom: 15px;
            color: #2c3e50;
        }

        .examples-list {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .example-card {
            flex: 1;
            min-width: 200px;
            padding: 15px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .example-card h4 {
            color: #3498db;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>地图距离计算工具</h1>
        <p class="description">基于坐标点计算两地之间的直线距离，适用于房地产、旅游规划、物流配送等场景</p>

        <div class="map-container">
            <div class="map" id="map">
                <!-- 地图上的点和线将通过JavaScript动态添加 -->
            </div>

            <div class="controls">
                <div class="input-group">
                    <label>起点坐标</label>
                    <div class="coordinates">
                        <input type="number" id="x0" placeholder="X坐标" step="0.01">
                        <input type="number" id="y0" placeholder="Y坐标" step="0.01">
                    </div>
                </div>

                <div class="input-group">
                    <label>终点坐标</label>
                    <div class="coordinates">
                        <input type="number" id="x1" placeholder="X坐标" step="0.01">
                        <input type="number" id="y1" placeholder="Y坐标" step="0.01">
                    </div>
                </div>

                <button class="btn btn-calculate" id="calculate">计算距离</button>

                <div class="result" id="result">
                    <h3>计算结果</h3>
                    <div>
                        <span class="distance-value" id="distance-value">0</span>
                        <span class="unit">单位</span>
                    </div>
                </div>

                <div class="actions">
                    <button class="btn btn-reset" id="reset">重置</button>
                    <button class="btn" id="save">保存记录</button>
                </div>

                <div class="history">
                    <h3>历史记录</h3>
                    <div class="history-list" id="history-list">
                        <!-- 历史记录将通过JavaScript动态添加 -->
                    </div>
                </div>
            </div>
        </div>

        <div class="application-examples">
            <h3>应用场景示例</h3>
            <div class="examples-list">
                <div class="example-card">
                    <h4>房地产评估</h4>
                    <p>计算物业与关键设施（如学校、医院、公园）的距离，评估地理位置价值。</p>
                </div>
                <div class="example-card">
                    <h4>旅游路线规划</h4>
                    <p>计算景点之间的直线距离，帮助游客规划最佳旅游路线。</p>
                </div>
                <div class="example-card">
                    <h4>物流配送优化</h4>
                    <p>计算配送点之间的距离，优化配送路线，提高配送效率。</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 使用提供的distance函数计算两点之间的距离
        const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);

        // 获取DOM元素
        const mapElement = document.getElementById('map');
        const x0Input = document.getElementById('x0');
        const y0Input = document.getElementById('y0');
        const x1Input = document.getElementById('x1');
        const y1Input = document.getElementById('y1');
        const calculateBtn = document.getElementById('calculate');
        const resetBtn = document.getElementById('reset');
        const saveBtn = document.getElementById('save');
        const distanceValue = document.getElementById('distance-value');
        const historyList = document.getElementById('history-list');

        // 存储点的状态
        let pointA = null;
        let pointB = null;
        let distanceLine = null;
        let history = JSON.parse(localStorage.getItem('distanceHistory')) || [];

        // 初始化地图点击事件
        mapElement.addEventListener('click', function (e) {
            const rect = mapElement.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            const xPercent = (x / rect.width * 100).toFixed(2);
            const yPercent = (y / rect.height * 100).toFixed(2);

            if (!pointA) {
                // 添加第一个点
                pointA = createPoint('point-a', xPercent, yPercent);
                x0Input.value = xPercent;
                y0Input.value = yPercent;
            } else if (!pointB) {
                // 添加第二个点
                pointB = createPoint('point-b', xPercent, yPercent);
                x1Input.value = xPercent;
                y1Input.value = yPercent;
                // 添加连接线
                drawLine();
                // 计算距离
                calculateDistance();
            }
        });

        // 创建点的函数
        function createPoint(className, x, y) {
            const point = document.createElement('div');
            point.className = `point ${className}`;
            point.style.left = `${x}%`;
            point.style.top = `${y}%`;
            mapElement.appendChild(point);
            return point;
        }

        // 绘制连接线
        function drawLine() {
            if (pointA && pointB) {
                if (distanceLine) {
                    mapElement.removeChild(distanceLine);
                }

                distanceLine = document.createElement('div');
                distanceLine.className = 'line';

                const x0 = parseFloat(x0Input.value);
                const y0 = parseFloat(y0Input.value);
                const x1 = parseFloat(x1Input.value);
                const y1 = parseFloat(y1Input.value);

                // 计算线的长度和角度
                const length = Math.sqrt(Math.pow((x1 - x0) * mapElement.offsetWidth / 100, 2) +
                    Math.pow((y1 - y0) * mapElement.offsetHeight / 100, 2));
                const angle = Math.atan2((y1 - y0) * mapElement.offsetHeight / 100,
                    (x1 - x0) * mapElement.offsetWidth / 100) * 180 / Math.PI;

                distanceLine.style.width = `${length}px`;
                distanceLine.style.left = `${x0}%`;
                distanceLine.style.top = `${y0}%`;
                distanceLine.style.transform = `rotate(${angle}deg)`;

                mapElement.appendChild(distanceLine);
            }
        }

        // 计算距离
        function calculateDistance() {
            const x0 = parseFloat(x0Input.value);
            const y0 = parseFloat(y0Input.value);
            const x1 = parseFloat(x1Input.value);
            const y1 = parseFloat(y1Input.value);

            if (!isNaN(x0) && !isNaN(y0) && !isNaN(x1) && !isNaN(y1)) {
                const dist = distance(x0, y0, x1, y1).toFixed(2);
                distanceValue.textContent = dist;
            }
        }

        // 重置函数
        function reset() {
            if (pointA) {
                mapElement.removeChild(pointA);
                pointA = null;
            }
            if (pointB) {
                mapElement.removeChild(pointB);
                pointB = null;
            }
            if (distanceLine) {
                mapElement.removeChild(distanceLine);
                distanceLine = null;
            }

            x0Input.value = '';
            y0Input.value = '';
            x1Input.value = '';
            y1Input.value = '';
            distanceValue.textContent = '0';
        }

        // 保存记录
        function saveRecord() {
            const x0 = parseFloat(x0Input.value);
            const y0 = parseFloat(y0Input.value);
            const x1 = parseFloat(x1Input.value);
            const y1 = parseFloat(y1Input.value);
            const dist = parseFloat(distanceValue.textContent);

            if (!isNaN(dist) && dist > 0) {
                const record = {
                    id: Date.now(),
                    x0, y0, x1, y1,
                    distance: dist,
                    timestamp: new Date().toLocaleString()
                };

                history.unshift(record); // 添加到历史记录开头
                if (history.length > 10) history.pop(); // 限制历史记录数量
                localStorage.setItem('distanceHistory', JSON.stringify(history));
                renderHistory();
            }
        }

        // 渲染历史记录
        function renderHistory() {
            historyList.innerHTML = '';
            history.forEach(record => {
                const item = document.createElement('div');
                item.className = 'history-item';
                item.innerHTML = `
                    <div class="history-points">
                        (${record.x0.toFixed(1)}, ${record.y0.toFixed(1)}) → 
                        (${record.x1.toFixed(1)}, ${record.y1.toFixed(1)})
                    </div>
                    <div class="history-distance">${record.distance}</div>
                `;
                item.addEventListener('click', () => {
                    reset();
                    x0Input.value = record.x0;
                    y0Input.value = record.y0;
                    x1Input.value = record.x1;
                    y1Input.value = record.y1;
                    pointA = createPoint('point-a', record.x0, record.y0);
                    pointB = createPoint('point-b', record.x1, record.y1);
                    drawLine();
                    calculateDistance();
                });
                historyList.appendChild(item);
            });
        }

        // 绑定事件
        calculateBtn.addEventListener('click', () => {
            if (!pointA && x0Input.value && y0Input.value) {
                pointA = createPoint('point-a', x0Input.value, y0Input.value);
            }
            if (!pointB && x1Input.value && y1Input.value) {
                pointB = createPoint('point-b', x1Input.value, y1Input.value);
            }
            if (pointA && pointB) {
                drawLine();
                calculateDistance();
            }
        });

        resetBtn.addEventListener('click', reset);
        saveBtn.addEventListener('click', saveRecord);

        // 监听输入框变化
        [x0Input, y0Input, x1Input, y1Input].forEach(input => {
            input.addEventListener('change', () => {
                if (pointA && x0Input.value && y0Input.value) {
                    pointA.style.left = `${x0Input.value}%`;
                    pointA.style.top = `${y0Input.value}%`;
                }
                if (pointB && x1Input.value && y1Input.value) {
                    pointB.style.left = `${x1Input.value}%`;
                    pointB.style.top = `${y1Input.value}%`;
                }
                if (pointA && pointB) {
                    drawLine();
                    calculateDistance();
                }
            });
        });

        // 初始化加载历史记录
        renderHistory();
    </script>
</body>

</html>